import React, { Component } from 'react'
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import TheDialog from '@/components/TheDialog'
import TheUpload from '@/components/TheUpload'
import TheImage from '@/components/TheImage'
import { Button, Form, Input, InputNumber, Space } from 'antd'
import { apiLevelSettingAdd, apiLevelSettingList, apiLevelSettingEdit, apiLevelSettingDel } from '@/request/users'

export default class Level extends Component {
  formRef = React.createRef()
  state = {
    columns: [
      {
        title: '等级名称',
        dataIndex: 'levelName',
        key: 'levelName'
      },
      {
        title: '等级标识',
        dataIndex: 'levelImg',
        key: 'levelImg',
        render: (text) => {
          return <TheImage src={text} width={25} height={20} />
        }
      },
      {
        title: '所需成长值',
        dataIndex: 'levelNeedExp',
        key: 'levelNeedExp',
        defaultSortOrder: 'ascend',
        sorter: (a, b) => parseInt(a.levelNeedExp) - parseInt(b.levelNeedExp),
        render: (text) => {
          return parseInt(text).toLocaleString()
        }
      },
      {
        title: '操作',
        render: (text, record, index) => {
          return <>
            <TheButton haspermi={['user:level:edit']} onClick={() => this.editDialog(record)}>编辑</TheButton>
          </>
        }
      },
    ],
    dataSource: [],
    loading: false,
    visible: false,
    title: '新增等级',
    editValue: {},
    type: 'add',
    btnLoading: false
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    this.setState({ loading: true })
    let res = await apiLevelSettingList()
    if (res.code === 0 && res.data) {
      this.setState({
        loading: false,
        dataSource: res.data
      })
    }
  }
  editDialog = value => {
    let fileList = value.levelImg.split(',').map(v => {
      return {
        uid: new Date().getTime(),
        name: 'image',
        status: 'done',
        url: v
      }
    })
    this.setState({
      title: '修改等级',
      visible: true,
      editValue: value,
      type: 'update',
      levelSettingId: value.levelSettingId,
      fileList
    })
  }
  dialogSave = async value => {
    const { type, levelSettingId } = this.state
    this.setState({
      btnLoading: true
    })
    if (type === 'update') {
      let res = await apiLevelSettingEdit({ levelSettingId, ...value })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      }
    }
    this.setState({
      btnLoading: false,
    }, () => {
      this.handelCancel()
      this.getData()
    })
  }
  handelCancel = () => {
    this.setState({
      title: '新增等级',
      visible: false,
      editValue: {},
      fileList: []
    })
  }
  getFileResult = file => {
    let levelImg = file.map(v => {
      if (v.response) {
        if (v.response.code === 0 && v.response.data) {
          return v.response.data
        }
      }
    }).join(',')
    this.formRef.current.setFieldsValue({ levelImg })
  }
  render() {
    const { columns, dataSource, loading, visible, title, editValue, btnLoading, fileList } = this.state
    return (
      <div className='p-layout-box'>
        <div className="p-layout-content">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} />
        </div>
        <TheDialog
          title={title}
          visible={visible}
          width={400}
          footer={null}
          handleCancel={this.handelCancel}
        >
          <Form ref={this.formRef} initialValues={editValue} onFinish={this.dialogSave} labelCol={{ span: 6 }}>
            <Form.Item label={'等级名称'} name="levelName" rules={[{ required: true }]}>
              <Input maxLength={3} />
            </Form.Item>
            <Form.Item label={'所需成长值'} name="levelNeedExp" rules={[{ required: true }]}>
              <InputNumber min={0} precision={0} />
            </Form.Item>
            <Form.Item label={'等级标识'} name="levelImg" rules={[{ required: true }]}>
              <TheUpload
                len={1}
                fileList={fileList}
                maxSize={10}
                getFileResult={this.getFileResult}
                // imgWidth={30}
                // imgHeight={30}
              />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.handelCancel}>取消</Button>
                  <Button loading={btnLoading} type='primary' htmlType='submit'>保存</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    )
  }
}
